<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>下拉菜单</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      </head>
      <body>
            <!-- 下拉菜单基本样式 -->
            <div class="dropdown">
                  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
                  <!-- dropdown-menu-right设置下拉菜单右对齐 -->
                  <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">下拉选项一</a>
                        <a class="dropdown-item" href="#">下拉选项二</a>
                        <a class="dropdown-item" href="#">下拉选项三</a>
                        <!-- 分割线 -->
                        <div class="dropdown-divider"></div>
                        <div class="dropdown-header">其他下拉菜单</div>
                        <a class="dropdown-item" href="#">下拉选项其他</a>
                  </div>
            </div>

            <!-- 右弹选项 -->
            <div class="btn-group dropright">
                  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">右弹按钮</button>
                  <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">下拉右弹选项一</a>
                        <a class="dropdown-item" href="#">下拉右弹选项二</a>
                        <a class="dropdown-item" href="#">下拉右弹选项三</a>
                  </div>
            </div>

            <!-- 右弹出下拉选项 -->
            <div class="btn-group dropright">
                  <button type="button" class="btn btn-secondary">右弹分隔下拉菜单</button>
                  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                        <span class="sr-only"></span>
                  </button>
                  <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">下拉分隔右弹选项一</a>
                        <a class="dropdown-item" href="#">下拉分隔右弹选项二</a>
                        <a class="dropdown-item" href="#">下拉分隔右弹选项三</a>
                  </div>
            </div>

            <br/><br/><br/><br/><br/><br/><br/><br/>
            <!-- 上弹出下拉选项 -->
            <div class="btn-group dropup">
                  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">右弹按钮</button>
                  <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">下拉右弹选项一</a>
                        <a class="dropdown-item" href="#">下拉右弹选项二</a>
                        <a class="dropdown-item" href="#">下拉右弹选项三</a>
                  </div>
            </div>

            <!-- 左弹出下拉菜单 -->
            <div class="btn-group dropleft" style="float: right;">
                  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">右弹按钮</button>
                  <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">下拉右弹选项一</a>
                        <a class="dropdown-item" href="#">下拉右弹选项二</a>
                        <a class="dropdown-item" href="#">下拉右弹选项三</a>
                  </div>
            </div>

            <!-- 垂直按钮组右弹出下拉菜单 -->
            <div class="btn-group-vertical dropright" style="clear: both;">
                  <button type="button" class="btn btn-primary">按钮1</button>
                  <button type="button" class="btn btn-primary">按钮2</button>
                  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">右弹按钮</button>
                  <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">下拉右弹选项一</a>
                        <a class="dropdown-item" href="#">下拉右弹选项二</a>
                        <a class="dropdown-item" href="#">下拉右弹选项三</a>
                  </div>
            </div>
      </body>
</html>